<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子传父</title>
    <script src="../react/react.development.js"></script>
    <script src="../react/react-dom.development.js"></script>
    <script src="../react/prop-types.js"></script>
    <script src="../react/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
    const Fragment = React.Fragment

    class Father extends React.Component {
        constructor (props) {
            super(props)
            this.callback = this.callback.bind(this)
        }

        state = {
            num: 0
        }

        callback (data, { user: { name } }) {
            let { num } = this.state
            console.log('子传递的元素的数值=>', data)
            console.log(name)
            this.setState({
                num: data
            })
        }

        render () {
            return (<Fragment>
                <h1>父元素：{this.state.num}</h1>
                <Child cb={this.callback}></Child>
            </Fragment>)
        }
    }

    class Child extends React.Component {
        constructor (props) {
            super(props)
            this.add = this.add.bind(this)
        }

        state = {
            count: 0
        }

        add () {
            var { count } = this.state
            this.setState({
                count: ++count
            })
            this.props.cb(count, { user: { name: '程麒阁' } })
        }

        render () {
            var { count } = this.state
            return (
                <Fragment>
                    <button onClick={this.add}>+</button>
                    <h3>子元素：{count}</h3>
                </Fragment>
            )
        }
    }

    ReactDOM.render(<Father></Father>, document.getElementById('root'))
</script>
</body>
</html>
